<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{css/font.css}">
    <link rel="stylesheet" th:href="@{css/xadmin.css}">
    <script th:src="@{lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <![endif]--></head>
<style>

    .layui-layer-iframe iframe {
        background-color: transparent;
    }

    .layui-layer-content {
        background-color: transparent;
    }
</style>

<body style="background-color: transparent">

<div class="layui-card-body" style="min-weight: 300px;margin-left: 30px">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="display_refash()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    <div id="main" class="layui-col-sm12" style="width:400px;height: 400px;"></div>
    <div id="main_fly" class="layui-col-sm12" style="width:400px;height: 400px;"></div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" th:src="@{js/kriging.js}"></script>
<script>


    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    function generateTestData(n) {
        var x = [];
        var y = [];
        var t = [];

        // create a fake dataset where t is 100 when lat is east
        for (var i = 0; i < n; i++) {
            x[i] = (-180) + Math.random() * 360;
            y[i] = Math.random() * 180;
            t[i] = Math.random() * 100;
        }
        return [t, x, y];
    }


    var data_train = generateTestData(500);

    console.log(data_train);

    var variogram = kriging.train(data_train[0], data_train[1], data_train[2], "exponential", 4, 50);
    console.log(variogram);

    var data = [];

    for (var v = 0; v <= Math.PI; v = v + (Math.PI / 40)) {
        for (var u = -Math.PI; u <= Math.PI; u += (Math.PI / 40)) {
            x = Math.sin(v) * Math.sin(u);
            y = Math.sin(v) * Math.cos(u);
            z = Math.cos(v);
            data.push([x, y, z, u, v, kriging.predict(u, v, variogram)]);
        }

    }
    //获得测试数据的声压最大最小值
    var max_data = data[0][5];
    var min_data = data[0][5];
    for (var i = 1; i < data.length; i++) {
        var cur = data[i][5];
        cur > max_data ? max_data = cur : null
        cur < min_data ? min_data = cur : null
    }

    option = {

        tooltip: {},
        visualMap: {
            show: true,
            dimension: 5,
            right: 0,
            calculable: true,
            min: min_data,
            max: max_data,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            }
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisPointer: {
                lineStyle: {
                    color: '#ffbd67'
                }
            },
            viewControl: {
                // 无法旋转
                //autoRotate: true
                // projection: 'orthographic'
            }
        }, toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        series: [{
            type: 'surface',
            dimensions: ['x', 'y', 'z', 'u', 'v', '声压值'],
            data: data

        }]
    };

    option && myChart.setOption(option);


    /*飞机3d图*/
    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

    var chartDom = document.getElementById('main_fly');
    var myChart_fly = echarts.init(chartDom);
    var option;

    option_fly = {
        tooltip: {},
        visualMap: {
            show: false,
            dimension: 2,
            min: -5,
            max: 0,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            }
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {
            viewControl: {
                alpha: 20,
                beta: 40
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisPointer: {
                lineStyle: {
                    color: '#ffbd67'
                }
            },
        },
        series: [{
            type: 'surface',
            parametric: true,
            wireframe: {
                show: false
            },

            realisticMaterial: {
                roughness: 0.4,
                metalness: 0
            },
            parametricEquation: {
                u: {
                    min: -Math.PI,
                    max: Math.PI,
                    step: Math.PI / 40
                },
                v: {
                    min: -15,
                    max: 6,
                    step: 0.21
                },
                x: function (u, v) {
                    return Math.pow(1.16, v) * Math.cos(v) * (1 + Math.cos(u));
                },
                y: function (u, v) {
                    return -Math.pow(1.16, v) * Math.sin(v) * (1 + Math.cos(u));
                },
                z: function (u, v) {
                    return -2 * Math.pow(1.16, v) * (1 + Math.sin(u));
                }
            }
        }]
    };

    option_fly && myChart_fly.setOption(option_fly);


    window.onload = function () {
        var unchangeX;
        var unchangeY;
        var click = false;
        var oDiv = document.getElementById("main"),
            unchangeX = myChart.getOption().grid3D[0].viewControl.alpha,
            unchangeY = myChart.getOption().grid3D[0].viewControl.beta;
        click = true;
        oDiv.onmousedown = function (ev) {//鼠标按下
            var oEvent = ev || event;
            click = true;
            document.onmousemove = function (ev) {//为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件
                if (click) {
                    var a = myChart.getOption().grid3D[0].viewControl.alpha;
                    var b = myChart.getOption().grid3D[0].viewControl.beta;
                    console.log("旋转角度");
                    if (a != unchangeX || b != unchangeY) {
                        console.log("开始同步旋转角度");
                        console.log(myChart.getOption().grid3D[0].viewControl.alpha);
                        console.log(myChart.getOption().grid3D[0].viewControl.beta);
                        option_fly.grid3D.viewControl.alpha = a;
                        option_fly.grid3D.viewControl.beta = b;
                        myChart_fly.setOption(option_fly);
                        unchangeX = a;
                        unchangeY = b;
                    }
                }

            };
            document.onmouseup = function () {//鼠标松开时
                click = false;
            };
            return false;
        };
    }

    display_refash();

    /*存储插值函数*/
    function display_refash() {
        console.log(variogram)
        //ajax请求
        $.ajax({
            //请求方式
            type: 'POST',
            //路径
            url: '/refresh-3DNoise',
            //传递的参数
            data: JSON.stringify(variogram),

            contentType: 'application/json;charset=UTF-8',//必须有

            crossDomain: true,
            //返回的数据类型
            dataType: "json",
            //回调函数 ,成功时返回的数据存在形参data里
            success: function (data) {
               // alert("上传成功")
            },
            error: function () {
               // alert("连接失败");
            }
        });
    }

</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>